<template>
	<view class="content">
		<view class="top-bar">
			<navigator url="../user/user?id=aaa" class="top-bar-left">
				<image src="../../static/my.png" ></image>
			</navigator>
			<view class="top-bar-center">
				<image src="../../static/logo.jpg"  mode="widthFix"></image>
			</view>
			<view class="top-bar-right">
				<view class="search">
						<image src="../../static/search.png"  mode="widthFix"></image>
				</view>
				<view class="add">
					<image src="../../static/top-add.png"  mode="widthFix"></image>
				</view>
			</view>
		</view>
		
		<!-- 好友列表 -->
		<view class="main">
			<view class="apply">
				<view class="friends">
					<view class="friends-list">
						<view class="friends-list-left">
							<!-- 消息数 -->
							<text class="tip">1</text>
							<!-- 头像 -->
							<navigator url="../user/user?id=aaa">
								<image src="../../static/eye.png" ></image>
							</navigator>
						</view>
						<view class="friends-list-right">
							<view class="friends-list-right-top">
								<view class="name">系统消息</view>
								<view class="time">
									<view class="date">好友申请</view>
									<view class="dateTime">123</view>
								</view>
							</view>
							<view class="friends-list-right-down">
								<text class="msg">xx申请</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="friends">
				<view class="friends-list" v-for="(item,index) in friendsList" v-bind:key="index">
					<view class="friends-list-left">
						<!-- 消息数 -->
						<text class="tip" v-if="item.tip > 0">{{item.tip}}</text>
						<!-- 头像 -->
						<navigator url="../user/user?id=aaa">
							<image :src="item.icon"></image>
						</navigator>
					</view>
					<view class="friends-list-right">
						<view class="friends-list-right-top">
							<view class="name">{{item.name}}</view>
							<view class="time">
								<view class="date">{{item.date}}</view>
								<view class="dateTime">{{item.dateTime}}</view>
							</view>
						</view>
						<view class="friends-list-right-down">
							<text class="msg">{{item.msg}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>	
	</view>
</template>

<script>
	
	import datas from "../../common/js-data/test_data.js"
	export default {
		data() {
			return {
				title: 'Hello',
				friendsList: []
			}
		},
		onLoad() {
			this.getFriendsList();
		},
		methods: {
			getFriendsList: function(){
				this.friendsList = datas.getFriendsList()
			}
		}
	}
</script>

<style lang="scss">
	
	.content {
		display: flex;
		// 主轴
		flex-direction: row;
		align-items: center;
		justify-content: center; // 设置主轴的排列方式
		// padding-top: var(--status-bar-height);
		padding-top: env(safe-area-inset-top);
		padding-bottom: env(safe-area-inset-bottom);
		// padding-bottom: 32px;
	}
	image{
		height: 48rpx;
		width: 100%;
	}
  	
	.main{
		padding-top: 108rpx;
		margin: 0 4px 3px;
		width: 100%;
		.friends-list{
			display: flex;
			justify-content: center;
			padding: 10rpx 0;
			.friends-list-left{
				display: flex;
				position: relative;
				image{
					height: 96rpx;
					width: 96rpx;
					 -webkit-border-radius: $uni-border-radius-base;
					border-radius: $uni-border-radius-base;
					background-color: $uni-color-warning;
				}
				.tip{
					position: absolute;
					z-index: 10;
					top: -8rpx;
					left: 68rpx;
					min-width: 20rpx;
					padding: 0 8rpx;
					height: 36rpx;
					background: red;
					border-radius: 18rpx;
					font-size: 12rpx;
					color: #FFFFFF;
					line-height: 36rpx;
					text-align: center;
				}
			}
		}
	}
	
	.friends-list-right-down{
		padding-top: 5rpx;
	}
	
	.msg{
		font-size: $uni-font-size-base;
		color: #C0C0C0;
		line-height: 40rpx;
		overflow:hidden; 
			text-overflow:ellipsis;
			display:-webkit-box; 
			/*! autoprefixer: off */
			-webkit-box-orient:vertical;
			/* autoprefixer: on */
			-webkit-line-clamp:1; 
			word-break:break-all;/*追加这一行代码*/
	}
	
	.friends-list-right{
		width: 100%;
		padding-left: 28rpx;
	}
	
	.friends-list-right-top{
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		.name{
			font-size: 36rpx;
			font-weight: 400;
			color: $uni-text-color;
		}
		.time{
			font-size: 24rpx;
			color: #C0C0C0;
			display: flex;
		}
	}
	
	
	.time{
		display: flex;
	}
	
	.top-bar{
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		justify-content: space-between;
		align-items:center;
		width: 100%;
		height: 88rpx;
		line-height: 24rpx;
		z-index: 1000;
		background-color: $uni-bg-color;
		box-shadow: 0px 1px 0px 0px rgba(0,0,0,0.1);
		.top-bar-left{
			image{
				left: 15rpx;
				width: 68rpx;
				height: 68rpx;
				border-radius: 16px;
			}
		}
		.top-bar-center{
			text-align: center;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			top: 15rpx;
			image{
				width: 68rpx;
				height: 68rpx;
			}
		}
		.top-bar-right{
			display: flex;
			image{
				width: 68rpx;
				height: 58rpx;
				right: 10rpx;
				padding-left: 8px;
			}
		}
	}
</style>
